<template>
    <div>
        <div v-if v-for="data in messageData" :key="data.id">
            <el-row :gutter="24">
                <el-col :span="1">
                    <el-avatar class="imgclass" :src="getUrl(data.userHeader)"></el-avatar>
                </el-col>
                <el-col :span="22" style="margin-left: 25px">
                    <el-row :gutter="24">
                        <a class="nameclass" href="javascript:void(0)">{{data.userName}}</a>
                        <span v-for="name in data.messageRole" class="roleclass">{{name}}</span>
                        <span class="timeclass">{{getTimeShow(data.createTime)}}</span>
                    </el-row>
                    <el-row :gutter="24" style="margin-top: 10px">
                        <span class="contentclass">{{data.content}}</span>
                    </el-row>
                    <el-row :gutter="24" style="padding-left: 10px;margin-top: 20px;margin-bottom: 20px">
                        <a href="javascript:void 0" class="blog" @click="topicShow(data.id)">回复</a> <a href="javascript:void 0"
                                                                                              class="blog">举报</a>
                    </el-row>
                    <WriteTopic :show="showTopic" :ref="data.id" :topic-info="data" v-on:updateData="updateData"></WriteTopic>
                    <div v-if="data.subMessageBoard.size != 0">
                        <SubMessage :message-data="data.subMessageBoard"></SubMessage>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
    import WriteTopic from "./WriteTopic";

    export default {
        name: "SubMessage",
        components: {WriteTopic},
        props: {
            messageData: {
                type: Array,
            }
        },
        data() {
            return {
                showTopic: true
            }
        },
        methods: {
            topicShow(id) {
               this.$refs[id][0].changeDis();
            },
            getUrl(param) {
                return process.env.IMG_URL + "/header/" + param;
            },
            getTimeShow(param) {
                let minute = 1000 * 60;
                let hour = minute * 60;
                let day = hour * 24;
                let week = day * 7;
                let month = day * 30;
                let time = param.replace('T', ' ');
                time = time.replace('-', '/');
                let timestamp = new Date(time).getTime();
                let now = new Date().getTime();
                let show = now - timestamp;
                let monthC = show / month;
                let weekC = show / week;
                let dayC = show / day;
                let hourC = show / hour;
                let minC = show / minute;
                if (monthC >= 1) {
                    if (monthC > 12) {
                        param = param.split("T")[0];
                    } else {
                        param = parseInt(monthC) + "个月前";
                    }
                } else if (weekC >= 1) {
                    param = parseInt(weekC) + "周前";
                } else if (dayC >= 1) {
                    param = parseInt(dayC) + "天前";
                } else if (hourC >= 1) {
                    param = parseInt(hourC) + "小时前";
                } else if (minC >= 1) {
                    param = parseInt(minC) + "分钟前";
                } else {
                    param = "刚刚";
                }
                return param;
            },
            updateData(val) {
                for (let data of  this.messageData) {
                    if (val.parentId == data.id){
                        data.subMessageBoard.unshift(val);
                        break;
                    }
                }

            }
        }
    }
</script>

<style scoped>

</style>